<template>
	<view class="pages" v-if="userInfo">
		<!-- 背景图 -->
		<image class="pages-bgimg" src="/static/images/common/top-bgimg.png" mode="scaleToFill"></image>
		<!-- 我的信息 -->
		<view class="my-top-box">
			<view class="userinfo-box row-box ">
				<view class="userinfo flex">
					<view class="avatar-box">
						<image class="avatar" :src="userInfo.avatar" mode="scaleToFill"></image>
						<view class="position fcc fc-ac fs-sm">
							导购
						</view>
					</view>
					<view class="info-box">
						<view class="nickname fc-w">
							上午好,{{userInfo.name}}
						</view>
						<view class="info-phone ">
							编号ID:{{userInfo.id}}
						</view>
						<view class="info-notes row-box mt-20" @click="$fn.toPages('/pages/area/manageInfo')"
							v-if="userInfo&&userInfo.is_area_manage">
							<view class="">
								<text class="info-notes-btn mr-10">{{userInfo.area_level_name}}</text>
								<text class="info-notes-text">业绩分红比例：{{userInfo.area_level_rate}}</text>
							</view>
							<u-icon name="arrow-right" color="#FFF" size="14"></u-icon>
						</view>
					</view>
				</view>
				<image src="/static/images/icons/rqimg.png" mode="scaleToFill" class="rqimg-icon"></image>
			</view>
		</view>
		<!-- 我的收益 -->
		<view class="pages-card">
			<view class="cash-box row-box pb-20">
				<view class="">
					<view class="tips fc-9">
						可提现金额(元)
					</view>
					<view class="cash fc-ac fw-6" v-if="staffsEarn">
						{{staffsEarn.user_earnings}}
					</view>
				</view>
				<view class="cash-btn fc-w fcc" @click="$fn.toPages('/pages/commission/withdrawal')">
					申请提现
				</view>
			</view>

			<p-income-tab></p-income-tab>
		</view>
		<!-- 功能按钮 -->
		<view class="pages-card btn-list" style="padding-top: 0;padding-bottom: 0;">
			<view class="btn-item row-box" @click="$fn.toPages('/pages/commission/commission')">
				<image class="icon" src="/static/images/my/icon-1.png" mode="scaleToFill"></image>
				<view class="title fc-3 ">
					导购收益
				</view>
				<text class="iconfont fc-9 fcc fs-sm ml-10 ">
					&#xe687;
				</text>
			</view>
			<view class="btn-item row-box" @click="bindWxUser">
				<image class="icon" src="/static/images/my/icon-2.png" mode="scaleToFill"></image>
				<view class="title">
					提现绑定
				</view>
				<image :src="wx_userInfo.avatar" mode="scaleToFill" class="avatar"
					v-if="wx_userInfo&&wx_userInfo.avatar"></image>
				<view class="nickname out-1" v-if="wx_userInfo&&wx_userInfo.nickname">
					{{wx_userInfo.nickname}}
				</view>
				<text class="iconfont fc-9 fcc fs-sm  ">
					&#xe687;
				</text>
			</view>
			<!--  -->
			<view class="btn-item row-box" v-if="userInfo&&userInfo.is_area_manage"
				@click="$fn.toPages('/pages/area/performanceData')">
				<image class="icon" src="/static/images/my/icon-3.png" mode="scaleToFill"></image>
				<view class="title">
					区域代理业绩分润
				</view>
				<text class="iconfont fc-9 fcc fs-sm  ">
					&#xe687;
				</text>
			</view>
		</view>
		<!-- 技术支持 -->
		<p-support class=""></p-support>
		<!-- 绑定导购弹窗 -->
		<u-popup :show="show" @close='close' bgColor='transparent' mode='center'>
			<view class="popup-box">
				<image src="/static/images/my/mine-popup-bgimg.png" mode="scaleToFill" class="popup-bgimg"></image>
				<view class="rqimg-box">
					<image :src="qrcodes" mode="scaleToFill" class="popup-rqimg"></image>
				</view>
			</view>
		</u-popup>
	</view>

</template>

<script>
	import {
		apiGetBindUserInfo,
		apiGetBindQrcode,
		apiGetBindInfo
	} from '@/api/user.js'
	import {
		apiGetStaffsEarn,
		apiApply,
		apiApplyLog,
		apiEarnList
	} from '@/api/commission.js'
	export default {
		data() {
			return {
				userInfo: null,
				wx_userInfo: null,
				staffsEarn: null,
				qrcodes: '',
				show: false
			};
		},
		async onLoad() {
			await this.$onLaunched;
		},
		async onShow() {
			await this.$onLaunched;
			this.userInfo = await this.getUserinfo(true)
			this.getBindUserInfo()
			this.getStaffsEarn()
		},
		methods: {
			async getStaffsEarn() {
				let res = await apiGetStaffsEarn()
				this.staffsEarn = res
			},
			async getBindUserInfo() {
				let {
					has_bind
				} = await apiGetBindInfo({
					staffs_id: this.userInfo.id
				})
				if (has_bind) {
					let res = await apiGetBindUserInfo({
						staffs_id: this.userInfo.id
					})
					if (res.data.user_info) {
						this.wx_userInfo = res.data.user_info
					}
				}
			},
			// 绑定微信用户
			async bindWxUser() {
				if (this.wx_userInfo) {
					this.$msg('已经绑定用户')
					return
				}
				let res = await apiGetBindQrcode({
					is_inside: 1
				})
				this.qrcodes = res.url
				this.show = true
			},
			close() {
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pages {
		position: relative;
	}


	.pages-card {
		position: relative;
		z-index: 1;
		border-radius: 18rpx;
		overflow: hidden;
		margin: 0 auto 20rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.pages-bgimg {
		width: 750rpx;
		height: 678rpx;
		position: absolute;
		top: calc(678 - (678 - 490))rpx;
		left: 0;
		z-index: 0;
	}

	// 顶部 个人信息
	.my-top-box {
		position: relative;
		z-index: 1;
		padding: 40rpx 44rpx 50rpx;

		.userinfo-box {
			padding: 0 24rpx;
		}

		.userinfo {
			align-items: center;

			.avatar-box {
				border-radius: 50%;
				position: relative;
				margin-right: 30rpx;

				.avatar {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					overflow: hidden;
					border: 4rpx solid #FFF;
					position: relative;
					z-index: 0;
					background-color: #f5f5f5;
				}

				.position {
					width: 90rpx;
					height: 44rpx;
					background-color: #fff;
					border-radius: 16rpx;
					position: absolute;
					bottom: -10rpx;
					left: 50%;
					transform: translateX(-50%);
					z-index: 1;
				}
			}

			.info-box {
				.nickname {
					font-size: 36rpx;
					font-weight: bold;

					margin-bottom: 10rpx;
				}

				.info-phone {
					color: rgba(255, 255, 255, 0.5);
				}

				.info-notes {
					.info-notes-btn {
						padding: 2rpx 8rpx;
						background: rgba(255, 255, 255, 0.2);
						border-radius: 200rpx 200rpx 200rpx 200rpx;
						border: 2rpx solid rgba(255, 255, 255, 0.4);
						color: #fff;
					}

					.info-notes-text {
						color: #fff;
					}
				}
			}
		}

		.rqimg-icon {
			width: 44rpx;
			height: 44rpx;
		}

	}

	//提现
	.cash-box {
		position: relative;
		z-index: 1;

		.tips {}

		.cash {
			line-height: 80rpx;
			font-size: 72rpx;
			margin: 12rpx 0 30rpx;
		}

		.cash-btn {
			width: 240rpx;
			height: 80rpx;
			border-radius: 12rpx;
			background-color: #00A191;
			line-height: 1rem;
		}
	}

	.btn-item {
		height: 100rpx;
		border-bottom: 1rpx solid #ededed;

		&:last-child {
			border-bottom: 0;
		}

		.icon {
			width: 48rpx;
			height: 48rpx;
			flex-shrink: 0;
		}

		.title {
			flex: 1;
			padding: 0 30rpx;
		}

		.avatar {
			width: 48rpx;
			height: 48rpx;
			border-radius: 50%;
			overflow: hidden;
			flex-shrink: 0;
			margin: 0 10rpx;
		}

		.nickname {
			max-width: 260rpx;
			margin-right: 20rpx;
		}
	}

	.popup-box {
		width: 650rpx;
		height: 880rpx;
		position: relative;
		border-radius: 20rpx;
		overflow: hidden;

		.popup-bgimg {
			width: 650rpx;
			height: 880rpx;

			position: relative;
			z-index: 0;
		}

		.rqimg-box {
			width: 380rpx;
			height: 380rpx;
			border: 2rpx solid rgba(0, 0, 0, 0.08);
			padding: 20rpx;
			z-index: 1;
			position: absolute;
			top: 288rpx;
			left: 136rpx;

			.popup-rqimg {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>